import { EnhancedTableProps, FormRule, Space } from 'tdesign-vue-next';

import { ActionBarItem } from '@/components/common-action-bar/index.vue';
import { t } from '@/locales';
import { tableActionBtn, tableSwitch } from '@/utils/action';

export interface FormItem {
  id?: number;
  siteModel: Recordable;
  parent: Recordable;
  catname: string;
  catnameEn: string;
  catdir: string;
  description: string;
  icon: string;
  imgIcon: Recordable;
  cover: Recordable;
  display: 1;
  seoTitle: string;
  seoKeywords: string;
  seoDescription: string;
}

export const ACTION_BAR_DATA: ActionBarItem[] = [
  { text: 'common.add', theme: 'primary', auth: ['content:category:create'], key: 'addShow' },
  {
    text: 'pages.category.recount',
    variant: 'outline',
    auth: ['content:category:recount'],
    key: 'reCount',
  },
  {
    text: 'pages.category.batremove',
    component: 'dropdown',
    options: [],
    variant: 'outline',
    disabled: true,
    auth: ['content:category:move'],
    key: 'move',
  },
];

export const COLUMNS: EnhancedTableProps['columns'] = [
  { colKey: 'row-select', type: 'multiple', width: 46 },
  { title: () => t('pages.category.name'), colKey: 'catname' },
  { title: () => t('pages.category.cateId'), colKey: 'id', width: 100 },
  { title: () => t('pages.category.cateDir'), colKey: 'catdir' },
  { title: () => t('pages.category.model'), colKey: 'siteModel.name' },
  { title: () => t('pages.category.count'), colKey: 'count' },
  { title: () => t('common.createAt'), colKey: 'updatedAt' },
  { title: () => t('common.sort'), colKey: 'listorder', width: 120 },
  {
    title: () => t('common.display'),
    colKey: 'display',
    width: 150,
    cell(h, { row }) {
      const ele = tableSwitch(h, row, ['content:category:display']);
      return row.display !== undefined ? ele : '';
    },
  },
  {
    colKey: 'action',
    title: () => t('common.operation'),
    width: 150,
    cell(h, { row }) {
      const actionAdd = tableActionBtn({ h, type: 'add', row, auths: ['content:category:create'] });
      const actionEdit = tableActionBtn({ h, type: 'edit', row, auths: ['content:category:detail'] });
      const actionDelete = tableActionBtn({ h, type: 'delete', row, auths: ['content:category:delete'] });

      return h(Space, () => {
        return [row.type === 2 ? '' : actionAdd, actionEdit, actionDelete];
      });
    },
  },
];

export const FORM_DATA: FormItem = {
  id: 0,
  siteModel: { id: '' },
  parent: { id: 0 },
  catname: '',
  catnameEn: '',
  catdir: '',
  description: '',
  icon: '',
  imgIcon: null,
  cover: null,
  display: 1,
  seoTitle: '',
  seoKeywords: '',
  seoDescription: '',
};

export const FORM_RULES: Record<string, FormRule[]> = {
  'siteModel.id': [{ required: true, trigger: 'blur' }],
  'parent.id': [{ required: true, trigger: 'blur' }],
  catname: [{ required: true, trigger: 'blur' }],
  catdir: [{ required: true, trigger: 'blur' }],
};
